<template>
  <view class="food-luck-container">
    <!-- 顶部导航栏 -->
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">我的饭局</view>
      </view>
    </view>

    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 饭局列表 -->
    <view class="party-list">
      <view v-for="(party, index) in partyList" :key="index" class="party-item" @click="goToPartyDetail(party)">
        <view class="party-header">
          <view class="party-name">{{ party.partydata.name }}</view>
          <view class="party-code">NO.{{ party.partydata.nocode }}</view>
        </view>
        <view class="party-info">
          <view class="info-item">
            <text class="info-label">人数：</text>
            <text class="info-value">{{ party.partydata.usernum }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">菜品：</text>
            <text class="info-value">{{ party.partydata.dishtype }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">时间：</text>
            <text class="info-value">{{ party.partydata.show_party_time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="partyList.length === 0" class="empty-state">
      <image src="/static/empty-party.png" class="empty-image" mode="aspectFit"></image>
      <text class="empty-text">暂无饭局记录</text>
      <text class="empty-desc">快去创建一个新的饭局吧</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      partyList: []
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);
    
    // 调用API获取真实的饭局数据
    this.getPartyList();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.getPartyList();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    // 跳转到饭局详情
    goToPartyDetail(party) {
      uni.navigateTo({
        url: `/activityPages/currentForm?id=${party.partydata.id}`
      });
    },
    // 获取饭局列表
    getPartyList() {
      const userInfo = uni.getStorageSync('userInfo') || {};
      const userid = userInfo.userid || userInfo.data?.userid || '';
      if (!userid) {
        uni.showToast({
          title: '用户信息获取失败',
          icon: 'none'
        });
        // 停止下拉刷新
        uni.stopPullDownRefresh();
        return;
      }
      // 显示加载提示
      uni.showLoading({
        title: '加载中...',
        mask: false
      });
      this.$Request.postApi("/bot/api/agentcgetuserpartylist", { userid}).then((res) => {
        uni.hideLoading();
        uni.stopPullDownRefresh(); // 停止下拉刷新
        if (res.status === 1) {
          this.partyList = res.data || [];
        } else {
          uni.showToast({
            title: res.message || '获取饭局列表失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        uni.hideLoading();
        uni.stopPullDownRefresh(); // 停止下拉刷新
        console.error('获取饭局列表失败:', err);
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>
.food-luck-container {
  padding-bottom: 40rpx;
  min-height: 100vh;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .nav-back-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
      color: #000000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.status-height-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background-color: #ffffff;
}

/* 饭局列表样式 */
.party-list {
  padding: 30rpx;
  margin-top: 190rpx;
}

.party-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
}

.party-item:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.party-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.party-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.party-code {
  font-size: 24rpx;
  color: #666666;
  background-color: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.party-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 1.5;
}

.info-label {
  color: #666666;
  font-weight: 500;
  min-width: 80rpx;
}

.info-value {
  color: #333333;
  flex: 1;
}

.party-status {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.status-text {
  font-size: 24rpx;
  color: #2263EC;
  background-color: rgba(34, 99, 236, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
  text-align: center;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-desc {
  font-size: 28rpx;
  color: #999999;
}
</style>